@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img {
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .ad-uploader-icon {
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 150px;
            text-align: center;
        }
    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item :rules="[{ required: true, message: '请填写商品名', trigger: 'blur'}]" label="商品名：" prop="title">
                        <el-input clearable v-model="form.title" placeholder="请填写商品名"></el-input>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]" label="类目：" prop="cate_id">
                        <el-cascader placeholder="请选择类目"
                                     separator=">"
                                     :options="categoys"
                                     expand-trigger="hover"
                                     v-model="form.cate_id">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请上传封面图', trigger: 'blur'}]" label="封面图：" prop="thumb">
                        <el-upload class="ad-uploader" name="image"
                                :action="upload_image"
                                :show-file-list="false"
                                :limit="1"
                                :on-success="uploadthumbSuccess"
                                :before-upload="uploadBefore">
                            <img v-if="form.thumb" :src="form.thumb" class="ad-img">
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸3:2!</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="兑换积分：" prop="price">
                        <el-input clearable v-model="form.price" placeholder="请填写兑换所需积分"></el-input>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 其他信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="商品图：" prop="images">
                        <el-upload list-type="picture-card" name="image" multiple
                            :action="upload_image"
                            :on-success="uploadimgSuccess"
                            :before-upload="uploadBefore"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :file-list="img_arr" >
                            <i class="el-icon-plus"></i>
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸3:2!</div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item :rules="[{ max: 100, message: '商品简介的长度不能超过100个字', trigger: 'blur' }]" label="商品简介：" prop="description">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请填写商品详情', trigger: 'blur'}]" label="商品详情：" prop="content">
                        <el-input type="textarea" rows="20" v-model="form.content"></el-input>
                        {{--<div id="editor"></div>--}}
                    </el-form-item>
                    <el-form-item label="联系人：" prop="link_name">
                        <el-input clearable v-model="form.link_name" placeholder="请填写联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="link_phone">
                        <el-input clearable v-model="form.link_phone" placeholder="请填写联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="部门：" prop="link_department">
                        <el-input clearable v-model="form.link_department" placeholder="请填写部门"></el-input>
                    </el-form-item>
                    <el-form-item label="职位：" prop="link_position">
                        <el-input clearable v-model="form.link_position" placeholder="请填写职位"></el-input>
                    </el-form-item>
                    <el-form-item label="运费：" prop="freight">
                        <el-input clearable v-model="form.freight" placeholder="请填写运费 0:免运费"></el-input>
                    </el-form-item>
                    <el-form-item label="库存：" prop="storage">
                        <el-input clearable v-model="form.storage" placeholder="请填写库存"></el-input>
                    </el-form-item>
                    <el-form-item label="浏览量：" prop="view">
                        <el-input clearable v-model="form.view" placeholder="浏览量"></el-input>
                    </el-form-item>
                    <el-form-item label="销量：" prop="salenum">
                        <el-input clearable v-model="form.salenum" placeholder="请填写销量"></el-input>
                    </el-form-item>
                    <el-form-item label="收藏量：" prop="collect">
                        <el-input clearable v-model="form.collect" placeholder="请填写收藏量"></el-input>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">确 定</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        dialogImageUrl: '',
                        dialogVisible: false,
                        info: {!! $info !!},
                        upload_image: UPLOAD_IMAGE,
                        form: {
                            id: " {{ $id }}",
                            cate_id: '',
                            title: '',
                            thumb: '',
                            images: [],
                            price: 0.00,
                            description: '',
                            content: '',
                            link_name: '',
                            link_phone: '',
                            link_department: '',
                            link_position: '',
                            view: 0,
                            storage: 0,
                            freight: 0,
                            salenum: 0,
                            collect: 0,
                        },
                        // editor: null,
                        categoys: {!! $categorys !!},
                        img_arr:[],
                    }
                },
                created() {
                    // this.editor = UE.getEditor('editor');
                    let that = this;
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            cate_id: this.info.cate_id,
                            title: this.info.title,
                            thumb: this.info.thumb,
                            images: this.info.images,
                            price: this.info.price,
                            description: this.info.description,
                            content: this.info.content,
                            link_name: this.info.link_name,
                            link_phone: this.info.link_phone,
                            link_department: this.info.link_department,
                            link_position: this.info.link_position,
                            view: this.info.view,
                            storage: this.info.storage,
                            freight: this.info.freight,
                            salenum: this.info.salenum,
                            collect: this.info.collect,
                        };
                        // this.editor.ready(function () {
                        //     that.editor.setContent(that.form.content);
                        // });
                    }
                    // this.editor.ready(function () {
                    //     that.editor.setPlaceholder('请填写产品详情');
                    // });
                    this.form.images.map(item=>{
                        this.img_arr.push({url:item})
                    })
                },
                methods: {
                    //单图
                    uploadthumbSuccess(res) {
                        this.form.thumb = res.data.path;
                    },
                    //多图
                    uploadimgSuccess(res) {
                        this.form.images.push(res.data.path);
                    },
                    uploadBefore(file) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                            this.$message.error('图片大小不能超过 2MB!');
                        }
                        return isLt2M;
                    },
                    //移除
                    handleRemove(file, fileList) {
                        this.form.images.indexOf(file.url) !=-1? this.form.images.splice(this.form.images.indexOf(file.url),1) : '';
                    },
                    //放大
                    handlePictureCardPreview(file) {
                        this.dialogImageUrl = file.url;
                        this.dialogVisible = true;
                    },
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        // this.form.content = this.editor.getContent();
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (!this.form.content) {
                                this.$refs.form.fields[3].error = "请填写产品详情";
                                return false;
                            }
                            if (!(/^1[3456789]\d{9}$/.test(this.form.link_phone))) {
                                this.$message.error('请填写正确的电话号码!');
                                return false;
                            }
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.busgoods.integralUpdate') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
